article {
  max-width: 1280px;
}
.section-block {
  background: #ffffff00;
  border-radius: 1.5rem;
  padding: 2rem 2.5rem;
  backdrop-filter: blur(1px);
  margin: 1.5rem 0 2.5rem 0;
  box-shadow: 3px 3px 12px rgba(Gray, 0.5);
  backdrop-filter: blur(10px);
}

.block-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 18rem);
  grid-template-rows: none;
  grid-column-gap: 2rem;
  grid-row-gap: 1.5rem;
  margin: 1.5rem 0 0rem 0;

  > .panel {
    border-radius: 0.5rem;
    padding: 1rem 1rem;
    box-shadow: 1px 1px 4px rgba(dimgray, 0.5);

    transition: all ease-in-out 300ms;

    > div {
      background-repeat: no-repeat;
      background-size: 48px 48px;
      background-position: bottom right;
      height: 100%;
      width: 100%;

      > h3 {
        font-weight: normal;
        font-size: 1.2rem;
        color: #427385;
        margin-bottom: 1rem;
      }

      > p {
        &::before {
          margin-right: 0.5rem;
          content: ">";
          text-decoration: none;
          color: #427385;
        }
        > a {
          color: #333;
        }
        margin-bottom: 0rem;
      }
    }

    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    &.docs {
      background-image: linear-gradient(45deg, #d4fc7933 0%, #96e6a1a0 100%);
      > div {
        background-image: url(images/document.png);
      }
    }

    &.video {
      background-image: linear-gradient(45deg, #84fab0a0 0%, #8fd3f433 100%);
      > div {
        background-image: url(images/video.png);
      }
    }
  }
}
